<template>
  <div class="videos">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="container">
        <h1 class="page-title">课程视频</h1>
        <p class="page-subtitle">通过视频学习前端开发技术</p>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="content-section">
      <div class="container">
        <el-row :gutter="20">
          <!-- 左侧视频列表 -->
          <el-col :xs="24" :sm="8" :md="6">
            <div class="sidebar">
              <div class="sidebar-header">
                <h3>视频列表</h3>
                <el-tag type="info" size="small">{{ videos.length }}个视频</el-tag>
              </div>
              
              <!-- 筛选器 -->
              <div class="filter-section">
                <el-select 
                  v-model="selectedChapter" 
                  placeholder="选择章节"
                  size="small"
                  style="width: 100%; margin-bottom: 10px;"
                  @change="handleChapterFilter"
                >
                  <el-option label="全部章节" value="all" />
                  <el-option 
                    v-for="chapter in chapters"
                    :key="chapter.id"
                    :label="chapter.title"
                    :value="chapter.id"
                  />
                </el-select>
                
                <el-input
                  v-model="searchKeyword"
                  placeholder="搜索视频"
                  prefix-icon="Search"
                  size="small"
                  @input="handleSearch"
                />
              </div>
              
              <!-- 视频列表 -->
              <div class="video-list">
                <div 
                  v-for="video in filteredVideos"
                  :key="video.id"
                  class="video-item"
                  :class="{ active: currentVideo?.id === video.id }"
                  @click="selectVideo(video)"
                >
                  <div class="video-thumbnail">
                    <img :src="video.thumbnail" :alt="video.title" />
                    <div class="play-overlay">
                      <el-icon size="24" color="white">
                        <VideoPlay />
                      </el-icon>
                    </div>
                    <div class="video-duration">{{ video.duration }}</div>
                    <div v-if="video.progress > 0" class="progress-bar">
                      <div 
                        class="progress-fill" 
                        :style="{ width: video.progress + '%' }"
                      ></div>
                    </div>
                  </div>
                  <div class="video-info">
                    <h4>{{ video.title }}</h4>
                    <p>{{ video.description }}</p>
                    <div class="video-meta">
                      <el-tag size="small" type="info">{{ video.chapter }}</el-tag>
                      <span class="view-count">{{ video.views }} 次观看</span>
                    </div>
                  </div>
                  <div class="video-status">
                    <el-icon v-if="video.progress >= 100" color="#67c23a" size="20">
                      <CircleCheck />
                    </el-icon>
                    <el-icon v-else-if="video.progress > 0" color="#e6a23c" size="20">
                      <Clock />
                    </el-icon>
                  </div>
                </div>
              </div>
            </div>
          </el-col>

          <!-- 右侧视频播放器 -->
          <el-col :xs="24" :sm="16" :md="18">
            <div class="video-player-section">
              <div v-if="!currentVideo" class="no-video-selected">
                <div class="empty-state">
                  <el-icon size="64" color="#c0c4cc">
                    <VideoPlay />
                  </el-icon>
                  <h3>请选择要观看的视频</h3>
                  <p>从左侧列表中选择一个视频开始学习</p>
                </div>
              </div>
              
              <div v-else class="video-content">
                <!-- 视频播放器 -->
                <div class="video-player">
                  <video 
                    ref="videoPlayer"
                    :src="currentVideo.url"
                    :poster="currentVideo.thumbnail"
                    controls
                    preload="metadata"
                    @loadedmetadata="onVideoLoaded"
                    @timeupdate="onTimeUpdate"
                    @ended="onVideoEnded"
                    @play="onVideoPlay"
                    @pause="onVideoPause"
                  >
                    您的浏览器不支持视频播放。
                  </video>
                </div>
                
                <!-- 视频信息 -->
                <div class="video-details">
                  <div class="video-header">
                    <div class="video-title-section">
                      <h2>{{ currentVideo.title }}</h2>
                      <p>{{ currentVideo.description }}</p>
                    </div>
                    <div class="video-actions">
                      <el-button-group>
                        <el-button 
                          :disabled="!hasPreviousVideo"
                          @click="playPreviousVideo"
                          icon="ArrowLeft"
                        >
                          上一个
                        </el-button>
                        <el-button 
                          :disabled="!hasNextVideo"
                          @click="playNextVideo"
                          icon="ArrowRight"
                        >
                          下一个
                        </el-button>
                      </el-button-group>
                      <el-button 
                        type="primary"
                        @click="toggleFavorite"
                        :icon="currentVideo.isFavorite ? 'Star' : 'StarFilled'"
                      >
                        {{ currentVideo.isFavorite ? '取消收藏' : '收藏' }}
                      </el-button>
                    </div>
                  </div>
                  
                  <!-- 视频统计信息 -->
                  <div class="video-stats">
                    <div class="stat-item">
                      <el-icon><Clock /></el-icon>
                      <span>时长: {{ currentVideo.duration }}</span>
                    </div>
                    <div class="stat-item">
                      <el-icon><View /></el-icon>
                      <span>观看: {{ currentVideo.views }} 次</span>
                    </div>
                    <div class="stat-item">
                      <el-icon><Calendar /></el-icon>
                      <span>发布: {{ currentVideo.publishDate }}</span>
                    </div>
                    <div class="stat-item">
                      <el-icon><User /></el-icon>
                      <span>讲师: {{ currentVideo.instructor }}</span>
                    </div>
                  </div>
                  
                  <!-- 学习进度 -->
                  <div class="progress-section">
                    <div class="progress-header">
                      <h4>学习进度</h4>
                      <span class="progress-text">{{ Math.round(currentVideo.progress) }}%</span>
                    </div>
                    <el-progress 
                      :percentage="currentVideo.progress" 
                      :stroke-width="8"
                      :show-text="false"
                    />
                    <div class="progress-actions">
                      <el-button 
                        size="small" 
                        @click="markAsCompleted"
                        :disabled="currentVideo.progress >= 100"
                      >
                        标记为已完成
                      </el-button>
                      <el-button 
                        size="small" 
                        @click="resetProgress"
                        type="warning"
                      >
                        重置进度
                      </el-button>
                    </div>
                  </div>
                  
                  <!-- 视频标签页 -->
                  <el-tabs v-model="activeTab" class="video-tabs">
                    <el-tab-pane label="视频简介" name="description">
                      <div class="video-description">
                        <div class="description-content" v-html="renderMarkdown(currentVideo.fullDescription)"></div>
                        
                        <!-- 学习要点 -->
                        <div class="learning-points">
                          <h4>学习要点</h4>
                          <ul>
                            <li v-for="point in currentVideo.learningPoints" :key="point">
                              {{ point }}
                            </li>
                          </ul>
                        </div>
                        
                        <!-- 相关资源 -->
                        <div class="related-resources">
                          <h4>相关资源</h4>
                          <div class="resource-links">
                            <el-link 
                              v-for="resource in currentVideo.resources"
                              :key="resource.id"
                              :href="resource.url"
                              target="_blank"
                              type="primary"
                            >
                              {{ resource.title }}
                            </el-link>
                          </div>
                        </div>
                      </div>
                    </el-tab-pane>
                    
                    <el-tab-pane label="章节目录" name="chapters">
                      <div class="chapter-list">
                        <div 
                          v-for="chapter in currentVideo.chapters"
                          :key="chapter.id"
                          class="chapter-item"
                          @click="seekToChapter(chapter.time)"
                        >
                          <div class="chapter-time">{{ formatTime(chapter.time) }}</div>
                          <div class="chapter-content">
                            <h5>{{ chapter.title }}</h5>
                            <p>{{ chapter.description }}</p>
                          </div>
                        </div>
                      </div>
                    </el-tab-pane>
                    
                    <el-tab-pane label="学习笔记" name="notes">
                      <div class="notes-section">
                        <div class="notes-editor">
                          <el-input
                            v-model="videoNotes"
                            type="textarea"
                            :rows="10"
                            placeholder="记录你的学习笔记..."
                            @blur="saveVideoNotes"
                          />
                        </div>
                        <div class="notes-actions">
                          <el-button @click="saveVideoNotes">保存笔记</el-button>
                          <el-button @click="exportVideoNotes">导出笔记</el-button>
                          <el-button @click="addTimestamp">添加时间戳</el-button>
                        </div>
                      </div>
                    </el-tab-pane>
                    
                    <el-tab-pane label="相关视频" name="related">
                      <div class="related-videos">
                        <div class="related-grid">
                          <div 
                            v-for="relatedVideo in getRelatedVideos()"
                            :key="relatedVideo.id"
                            class="related-video-card"
                            @click="selectVideo(relatedVideo)"
                          >
                            <div class="related-thumbnail">
                              <img :src="relatedVideo.thumbnail" :alt="relatedVideo.title" />
                              <div class="related-duration">{{ relatedVideo.duration }}</div>
                            </div>
                            <div class="related-info">
                              <h5>{{ relatedVideo.title }}</h5>
                              <p>{{ relatedVideo.description }}</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  VideoPlay, 
  CircleCheck, 
  Clock, 
  ArrowLeft, 
  ArrowRight,
  Star,
  StarFilled,
  View,
  Calendar,
  User,
  Search
} from '@element-plus/icons-vue'

// 响应式数据
const currentVideo = ref(null)
const selectedChapter = ref('all')
const searchKeyword = ref('')
const activeTab = ref('description')
const videoNotes = ref('')
const videoPlayer = ref(null)
const currentTime = ref(0)
const duration = ref(0)

// 章节数据
const chapters = ref([
  { id: 1, title: '第1章 HTML基础' },
  { id: 2, title: '第2章 CSS样式' },
  { id: 3, title: '第3章 JavaScript' },
  { id: 4, title: '第4章 Vue.js框架' },
  { id: 5, title: '第5章 项目实战' }
])

// 视频数据
const videos = ref([
  {
    id: 1,
    title: 'HTML基础入门',
    description: '学习HTML的基本语法和常用标签',
    thumbnail: '/api/placeholder/320/180',
    url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4',
    duration: '45:30',
    chapter: '第1章 HTML基础',
    chapterId: 1,
    views: 1234,
    progress: 0,
    isFavorite: false,
    publishDate: '2024-01-15',
    instructor: '张老师',
    fullDescription: `# HTML基础入门

本视频将带你全面了解HTML的基础知识，包括：

## 主要内容
- HTML文档结构
- 常用HTML标签
- 标签属性的使用
- 语义化HTML的重要性

通过本视频的学习，你将能够创建基本的HTML页面。`,
    learningPoints: [
      '掌握HTML基本语法',
      '了解常用HTML标签',
      '学会使用标签属性',
      '理解语义化HTML'
    ],
    resources: [
      { id: 1, title: 'HTML参考文档', url: 'https://developer.mozilla.org/zh-CN/docs/Web/HTML' },
      { id: 2, title: '课程源码', url: '#' }
    ],
    chapters: [
      { id: 1, title: '课程介绍', description: '了解本节课的学习目标', time: 0 },
      { id: 2, title: 'HTML文档结构', description: '学习HTML文档的基本结构', time: 300 },
      { id: 3, title: '常用标签介绍', description: '介绍常用的HTML标签', time: 600 },
      { id: 4, title: '实践练习', description: '通过实例练习巩固知识', time: 1200 }
    ]
  },
  {
    id: 2,
    title: 'CSS样式基础',
    description: '学习CSS的基本语法和样式设置',
    thumbnail: '/api/placeholder/320/180',
    url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_2mb.mp4',
    duration: '52:15',
    chapter: '第2章 CSS样式',
    chapterId: 2,
    views: 987,
    progress: 25,
    isFavorite: true,
    publishDate: '2024-01-20',
    instructor: '李老师',
    fullDescription: `# CSS样式基础

本视频将教你如何使用CSS美化网页：

## 主要内容
- CSS语法规则
- 选择器的使用
- 常用CSS属性
- 盒模型概念`,
    learningPoints: [
      '掌握CSS基本语法',
      '了解各种选择器',
      '学会设置常用样式',
      '理解盒模型'
    ],
    resources: [
      { id: 3, title: 'CSS参考文档', url: 'https://developer.mozilla.org/zh-CN/docs/Web/CSS' }
    ],
    chapters: [
      { id: 1, title: 'CSS简介', description: 'CSS的作用和重要性', time: 0 },
      { id: 2, title: '选择器详解', description: '各种CSS选择器的使用', time: 400 },
      { id: 3, title: '盒模型', description: '理解CSS盒模型', time: 800 }
    ]
  },
  {
    id: 3,
    title: 'JavaScript基础语法',
    description: '学习JavaScript的基本语法和编程概念',
    thumbnail: '/api/placeholder/320/180',
    url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4',
    duration: '68:45',
    chapter: '第3章 JavaScript',
    chapterId: 3,
    views: 1567,
    progress: 100,
    isFavorite: false,
    publishDate: '2024-01-25',
    instructor: '王老师',
    fullDescription: `# JavaScript基础语法

深入学习JavaScript编程语言的基础知识。`,
    learningPoints: [
      '掌握JavaScript基本语法',
      '了解变量和数据类型',
      '学会使用函数',
      '理解作用域概念'
    ],
    resources: [
      { id: 4, title: 'JavaScript参考', url: 'https://developer.mozilla.org/zh-CN/docs/Web/JavaScript' }
    ],
    chapters: [
      { id: 1, title: '变量和数据类型', description: 'JavaScript的基本数据类型', time: 0 },
      { id: 2, title: '函数', description: '函数的定义和使用', time: 600 },
      { id: 3, title: '对象和数组', description: '复杂数据类型的使用', time: 1200 }
    ]
  }
  // 可以添加更多视频...
])

// 计算属性
const filteredVideos = computed(() => {
  let filtered = videos.value
  
  // 按章节筛选
  if (selectedChapter.value !== 'all') {
    filtered = filtered.filter(video => video.chapterId === selectedChapter.value)
  }
  
  // 按关键词搜索
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    filtered = filtered.filter(video => 
      video.title.toLowerCase().includes(keyword) ||
      video.description.toLowerCase().includes(keyword)
    )
  }
  
  return filtered
})

const hasPreviousVideo = computed(() => {
  if (!currentVideo.value) return false
  const currentIndex = filteredVideos.value.findIndex(v => v.id === currentVideo.value.id)
  return currentIndex > 0
})

const hasNextVideo = computed(() => {
  if (!currentVideo.value) return false
  const currentIndex = filteredVideos.value.findIndex(v => v.id === currentVideo.value.id)
  return currentIndex < filteredVideos.value.length - 1
})

// 方法
const selectVideo = (video) => {
  currentVideo.value = video
  activeTab.value = 'description'
  loadVideoNotes()
  
  // 更新观看次数
  video.views++
  
  nextTick(() => {
    if (videoPlayer.value) {
      videoPlayer.value.load()
    }
  })
}

const handleChapterFilter = () => {
  // 筛选逻辑已在计算属性中实现
}

const handleSearch = () => {
  // 搜索逻辑已在计算属性中实现
}

const playPreviousVideo = () => {
  if (hasPreviousVideo.value) {
    const currentIndex = filteredVideos.value.findIndex(v => v.id === currentVideo.value.id)
    selectVideo(filteredVideos.value[currentIndex - 1])
  }
}

const playNextVideo = () => {
  if (hasNextVideo.value) {
    const currentIndex = filteredVideos.value.findIndex(v => v.id === currentVideo.value.id)
    selectVideo(filteredVideos.value[currentIndex + 1])
  }
}

const toggleFavorite = () => {
  if (currentVideo.value) {
    currentVideo.value.isFavorite = !currentVideo.value.isFavorite
    ElMessage.success(currentVideo.value.isFavorite ? '已添加到收藏' : '已取消收藏')
    saveVideoProgress()
  }
}

const markAsCompleted = () => {
  if (currentVideo.value) {
    currentVideo.value.progress = 100
    ElMessage.success('已标记为完成')
    saveVideoProgress()
  }
}

const resetProgress = () => {
  if (currentVideo.value) {
    currentVideo.value.progress = 0
    ElMessage.success('进度已重置')
    saveVideoProgress()
  }
}

const onVideoLoaded = () => {
  if (videoPlayer.value) {
    duration.value = videoPlayer.value.duration
  }
}

const onTimeUpdate = () => {
  if (videoPlayer.value && currentVideo.value) {
    currentTime.value = videoPlayer.value.currentTime
    const progress = (currentTime.value / duration.value) * 100
    currentVideo.value.progress = Math.max(currentVideo.value.progress, progress)
    
    // 每30秒保存一次进度
    if (Math.floor(currentTime.value) % 30 === 0) {
      saveVideoProgress()
    }
  }
}

const onVideoEnded = () => {
  if (currentVideo.value) {
    currentVideo.value.progress = 100
    ElMessage.success('视频播放完成')
    saveVideoProgress()
  }
}

const onVideoPlay = () => {
  // 视频开始播放
}

const onVideoPause = () => {
  // 视频暂停时保存进度
  saveVideoProgress()
}

const seekToChapter = (time) => {
  if (videoPlayer.value) {
    videoPlayer.value.currentTime = time
    videoPlayer.value.play()
  }
}

const formatTime = (seconds) => {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = Math.floor(seconds % 60)
  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
}

const renderMarkdown = (content) => {
  return content
    .replace(/^# (.*$)/gim, '<h1>$1</h1>')
    .replace(/^## (.*$)/gim, '<h2>$1</h2>')
    .replace(/^### (.*$)/gim, '<h3>$1</h3>')
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.*?)\*/g, '<em>$1</em>')
    .replace(/\n/g, '<br>')
}

const saveVideoNotes = () => {
  if (currentVideo.value) {
    const notesKey = `video_notes_${currentVideo.value.id}`
    localStorage.setItem(notesKey, videoNotes.value)
    ElMessage.success('笔记保存成功')
  }
}

const loadVideoNotes = () => {
  if (currentVideo.value) {
    const notesKey = `video_notes_${currentVideo.value.id}`
    videoNotes.value = localStorage.getItem(notesKey) || ''
  }
}

const exportVideoNotes = () => {
  if (!videoNotes.value.trim()) {
    ElMessage.warning('没有笔记内容可导出')
    return
  }
  
  const blob = new Blob([videoNotes.value], { type: 'text/plain' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = `${currentVideo.value.title}_笔记.txt`
  a.click()
  URL.revokeObjectURL(url)
  ElMessage.success('笔记导出成功')
}

const addTimestamp = () => {
  if (videoPlayer.value && currentVideo.value) {
    const timestamp = formatTime(currentTime.value)
    const timestampText = `\n[${timestamp}] `
    videoNotes.value += timestampText
    ElMessage.success('时间戳已添加')
  }
}

const getRelatedVideos = () => {
  if (!currentVideo.value) return []
  
  return videos.value
    .filter(video => 
      video.id !== currentVideo.value.id && 
      video.chapterId === currentVideo.value.chapterId
    )
    .slice(0, 4)
}

const saveVideoProgress = () => {
  const progress = {
    videos: videos.value.map(video => ({
      id: video.id,
      progress: video.progress,
      isFavorite: video.isFavorite,
      views: video.views
    })),
    lastWatched: currentVideo.value?.id,
    lastUpdated: new Date().toISOString()
  }
  localStorage.setItem('video_progress', JSON.stringify(progress))
}

const loadVideoProgress = () => {
  const saved = localStorage.getItem('video_progress')
  if (saved) {
    const progress = JSON.parse(saved)
    progress.videos.forEach(savedVideo => {
      const video = videos.value.find(v => v.id === savedVideo.id)
      if (video) {
        video.progress = savedVideo.progress || 0
        video.isFavorite = savedVideo.isFavorite || false
        video.views = savedVideo.views || 0
      }
    })
    
    // 自动播放上次观看的视频
    if (progress.lastWatched) {
      const lastVideo = videos.value.find(v => v.id === progress.lastWatched)
      if (lastVideo) {
        currentVideo.value = lastVideo
        loadVideoNotes()
      }
    }
  }
}

// 监听视频进度变化，自动保存
watch(() => videos.value.map(v => ({ id: v.id, progress: v.progress })), () => {
  saveVideoProgress()
}, { deep: true })

onMounted(() => {
  loadVideoProgress()
})
</script>

<style scoped>
.content-section {
  padding: 40px 0;
  min-height: calc(100vh - 200px);
}

.sidebar {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #eee;
}

.sidebar-header h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.2rem;
}

.filter-section {
  padding: 15px 20px;
  background: white;
  border-bottom: 1px solid #eee;
}

.video-list {
  background: white;
  border-radius: 0 0 8px 8px;
}

.video-item {
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.video-item:hover,
.video-item.active {
  background: #e3f2fd;
}

.video-item:last-child {
  border-bottom: none;
}

.video-thumbnail {
  position: relative;
  width: 100%;
  height: 120px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-item:hover .play-overlay {
  opacity: 1;
}

.video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(0, 0, 0, 0.3);
}

.progress-fill {
  height: 100%;
  background: #409eff;
  transition: width 0.3s ease;
}

.video-info h4 {
  margin: 0 0 5px 0;
  color: #2c3e50;
  font-size: 14px;
  line-height: 1.4;
}

.video-info p {
  margin: 0 0 8px 0;
  color: #7f8c8d;
  font-size: 12px;
  line-height: 1.3;
}

.video-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.view-count {
  font-size: 11px;
  color: #c0c4cc;
}

.video-status {
  position: absolute;
  top: 15px;
  right: 20px;
}

.video-player-section {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.no-video-selected {
  padding: 80px 20px;
  text-align: center;
}

.empty-state h3 {
  margin: 20px 0 10px 0;
  color: #909399;
}

.empty-state p {
  margin: 0;
  color: #c0c4cc;
}

.video-player {
  position: relative;
  width: 100%;
  background: #000;
}

.video-player video {
  width: 100%;
  height: auto;
  max-height: 500px;
}

.video-details {
  padding: 30px;
}

.video-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 25px;
}

.video-title-section h2 {
  margin: 0 0 10px 0;
  color: #2c3e50;
  font-size: 1.8rem;
}

.video-title-section p {
  margin: 0;
  color: #7f8c8d;
  line-height: 1.6;
}

.video-actions {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.video-stats {
  display: flex;
  gap: 30px;
  margin-bottom: 25px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #7f8c8d;
  font-size: 14px;
}

.progress-section {
  margin-bottom: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.progress-header h4 {
  margin: 0;
  color: #2c3e50;
}

.progress-text {
  font-weight: 600;
  color: #409eff;
}

.progress-actions {
  margin-top: 15px;
  display: flex;
  gap: 10px;
}

.video-tabs {
  margin-top: 20px;
}

.video-description {
  line-height: 1.8;
}

.description-content {
  margin-bottom: 30px;
}

.learning-points,
.related-resources {
  margin-bottom: 25px;
}

.learning-points h4,
.related-resources h4 {
  color: #2c3e50;
  margin-bottom: 15px;
}

.learning-points ul {
  padding-left: 20px;
}

.learning-points li {
  margin-bottom: 8px;
  color: #7f8c8d;
}

.resource-links {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.chapter-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chapter-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.chapter-item:hover {
  background: #e3f2fd;
  transform: translateX(5px);
}

.chapter-time {
  background: #409eff;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  min-width: 50px;
  text-align: center;
}

.chapter-content {
  flex: 1;
}

.chapter-content h5 {
  margin: 0 0 5px 0;
  color: #2c3e50;
}

.chapter-content p {
  margin: 0;
  color: #7f8c8d;
  font-size: 14px;
}

.notes-section {
  padding: 20px 0;
}

.notes-editor {
  margin-bottom: 20px;
}

.notes-actions {
  display: flex;
  gap: 10px;
}

.related-videos {
  padding: 20px 0;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.related-video-card {
  background: #f8f9fa;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.related-video-card:hover {
  background: #e3f2fd;
  transform: translateY(-3px);
}

.related-thumbnail {
  position: relative;
  width: 100%;
  height: 140px;
}

.related-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.related-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.related-info {
  padding: 15px;
}

.related-info h5 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 14px;
}

.related-info p {
  margin: 0;
  color: #7f8c8d;
  font-size: 12px;
  line-height: 1.4;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .video-header {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }
  
  .video-actions {
    width: 100%;
    flex-direction: column;
  }
  
  .video-stats {
    flex-direction: column;
    gap: 15px;
  }
  
  .progress-actions {
    flex-direction: column;
  }
  
  .related-grid {
    grid-template-columns: 1fr;
  }
  
  .sidebar {
    position: static;
    margin-bottom: 20px;
    max-height: none;
  }
  
  .video-details {
    padding: 20px;
  }
}
</style>